<template>
  <div>
    <el-form
      :model="form"
      ref="formRef"
      :rules="rules"
      label-width="120px"
      class="w-400px"
    >
      <el-form-item label="旧密码" prop="old_pwd">
        <el-input
          v-model="form.old_pwd"
          type="password"
          placeholder="请输入"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="new_pwd">
        <el-input
          v-model="form.new_pwd"
          type="password"
          placeholder="请输入"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirm_new_pwd">
        <el-input
          v-model="form.confirm_new_pwd"
          type="password"
          placeholder="请输入"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { change_my_password } from "@/api/back/user";
import { rules } from "./data.config";

const formRef = ref();
const form = reactive({
  old_pwd: "",
  new_pwd: "",
  confirm_new_pwd: "",
});

const submit = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      if(form.new_pwd !== form.confirm_new_pwd) return ElMessage.error("两次输入密码不一致！");
      const { code, message } = await change_my_password({
        old_pwd: form.old_pwd,
        new_pwd: form.new_pwd,
      });
      if (code === 200) {
        ElMessage.success("修改成功！");
      } else {
        ElMessage.error(message);
      }
    }
  });
};
</script>

<style scoped></style>
